<script>
import {addEnterprises, getAddress, getzhiwei} from "@/api";
import HeaderPage from "@/components/headerPage.vue";
// import MapPage from "@/views/mapPage.vue";
export default {
  name: "publishPage",
  components: {HeaderPage},
  data() {
    return {
      // 获取城市  数据
      // 自己的
      myArea: [],
      mycityQuery: [],
      myareaQuery: [],
      myprovince: "",
      mycity: '',
      myarea: "",
      value: null,
      form: {
        // 城市
        enterpriseAddress: '',
        //发布用户的id
        userId: '',
        //曾任职位
        youWork: '',
        // 企业名称
        companyName: '',
        // 存在问题
        thereProblem: '',
        // 详情描述
        detailedDescription: '',
        // 工资情况
        wage: '',
        // 社保情况
        socialSecurity: '',
        //加班情况
        overtimesSituation: '',
        //单双休情况
        weekendsClosed: '',
        // 公积金情况
        reserveFund: '',
        companyRating: 0
      },
      // 获取职位
      zhiweiList: '',
      sheng: '',
      shi: ''
    }
  },
  created() {
    // 获取省  市
    getAddress().then(res => {
      this.myArea = res.data
    })
    // 获取全部职位  存放下拉框
    getzhiwei().then(res => {
      this.zhiweiList = res.data
    })
  },
  methods: {
    // element
    handleChangesheng(value) {
      this.sheng = value.label
    },
    handleChangeshi(value) {
      this.shi = value.label
    },
    onSubmit() {
      this.form.LocalArea = this.sheng + this.shi

      this.form.companyRating = this.value * 2
      console.log(this.form.companyRating)
      this.form.userId = this.$store.state.registerList.userId

      // localStorage.getItem('VUEX:STATE')
      addEnterprises(this.form).then(res => {
        //登录成功跳回首页
        if (res.code === 2001) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">恭喜你，添加成功！</strong>',
            type: 'success'
          });
          this.$router.push('/searchPage')
        }
      })
    }
  },
  watch: {
    myprovince: function (newValue) {
      this.mycityQuery = [],
          this.myareaQuery = [],
          this.myArea.forEach((item) => {
            if (newValue.value === item.value) {
              this.mycityQuery = item.children
            }
          })
    },
  },
}
</script>

<template>
  <div class="box">
    <headerPage style="background-color: #0454ac;"></headerPage>
    <div class="main">
      <a-alert message="后台做加密处理，保护用户隐私！" banner style="margin:10px 0;height: 40px"/>
      <header class="whiteBox paddingBox ">
        <div class="title">添加企业信息：</div>
      </header>
      <a-divider style="margin: 0"/>
      <!-- 表单提交-->
      <div class="whiteBox " style="padding: 20px">
        <el-form ref="form" :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="企业名称：">
                  <el-input v-model="form.companyName" placeholder="请输入企业名称" clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-form-item label="所属地区：" v-model="form.enterpriseAddress">
                  <el-select v-model="myprovince" placeholder="请选择省" @change="handleChangesheng">
                    <el-option
                        v-for="item in myArea"
                        :key="item.value"
                        :label="item.label"
                        :value="item">
                    </el-option>
                  </el-select>
                  <el-select v-model="mycity" placeholder="请选择市" @change="handleChangeshi">
                    <el-option
                        v-for="item in mycityQuery"
                        :key="item.value"
                        :label="item.label"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="企业评分：">
                  <!-- 评分-->
                  <el-rate
                      :value="value"
                      @input="(val)=>value=val"
                      show-score
                      text-color="#ff9900"
                      :max="5"
                      allow-half
                      :score-template="`${value*2}分`">
                  </el-rate>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <!-- 曾经职位-->
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="曾任职位：">
                  <el-select v-model="form.youWork" placeholder="请选择曾任职位">
                    <el-option :label="item.zhiWeiName" :value="item.zhiWeiName" v-for="item in zhiweiList"
                               :key="item.tbZhiweiId"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
              </div>
            </el-col>
          </el-row>
          <!--注册时间-->
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="薪资发放：">
                  <el-radio-group v-model="form.wage">
                    <el-radio :label="1">按时发放</el-radio>
                    <el-radio :label="2">拖延发放</el-radio>
                    <el-radio :label="3">欠薪</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <!-- 社保-->
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="社保情况：">
                  <el-radio-group v-model="form.socialSecurity">
                    <el-radio :label="1">按时上</el-radio>
                    <el-radio :label="2">不按时上</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <!-- 公积金情况-->
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="休息制度：">
                  <el-radio-group v-model="form.weekendsClosed">
                    <el-radio :label="1">双休</el-radio>
                    <el-radio :label="2">单休</el-radio>
                    <el-radio :label="3">大小周</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="公积金情况">
                  <el-radio-group v-model="form.reserveFund">
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="2">无</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="加班情况：">
                  <el-radio-group v-model="form.overtimesSituation">
                    <el-radio :label="1">根据项目加班</el-radio>
                    <el-radio :label="2">经常强制加班</el-radio>
                    <el-radio :label="3">不加班</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light"></div>
            </el-col>
          </el-row>
          <!--详情描述-->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-form-item label="详情描述：">
                  <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="form.detailedDescription"
                            placeholder="详情描述"
                            clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">添 加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-rate {
  line-height: 2;
}

.radios {
  border-radius: 10px;
}

.whiteBox {
  padding: 10px;
  background-color: white;
}

header {
  .title {
    font-size: 20px;
  }
}

.main {
  width: 80%;
  height: 800px;
}

.box {
  background-color: whitesmoke;
  margin: 0 auto;
}

.paddingBox {
  padding: 10px;
}
</style>
